<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width: 100px;height:100px;background: red;position: absolute;left: 0;top:0;}
        .box2{width: 100px;height:100px;background: green;position: absolute;left: 0;top:110px;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<script>
    // 面向对象

    // 1. 获取元素
    // 2. 绑定事件
        // 按下
            // 获取鼠标相对于事件源的坐标
            // 移动
                // 元素的位置 = 边界限定(获取鼠标相对于页面的坐标 - 按下时的坐标)
            // 抬起
                // 删除移动事件
                // 删除抬起事件

    function Drag(ele){
        this.box = ele;
        // 因为使用了事件监听式绑定和删除事件
        // 因为将事件处理函数单独封装成了方法
        // 因为为了修复this指向问题
        // 绑定和删除时无法获取同一个函数，所以需要提前将改变了this指向的事件处理函数保存起来
        this.m = this.move.bind(this);
        this.u = this.up.bind(this)
        this.init();
    }
    Drag.prototype = {
        constructor: Drag,
        init(){
            // 因为把事件处理函数单独封装成类的一个方法，而且该方法不是被实例执行，是在事件触发时执行（事件处理函数），所以要提前改变down方法内的this指向
            this.box.addEventListener("mousedown", this.down.bind(this));
        },
        down(eve){
            this.downX = eve.offsetX;
            this.downY = eve.offsetY;
            document.addEventListener("mousemove", this.m)
            document.addEventListener("mouseup", this.u)
        },
        move(eve){
            this.box.style.left = eve.pageX - this.downX + "px";
            this.box.style.top = eve.pageY - this.downY + "px";
        },
        up(){
            document.removeEventListener("mousemove", this.m)
            document.removeEventListener("mouseup", this.u)
        }
    }


    function SmallDrag(ele){
        Drag.call(this, ele);
    }
    for(let i in Drag.prototype){
        SmallDrag.prototype[i] = Drag.prototype[i]
    }

    SmallDrag.prototype.move = function(eve){
        let l = eve.pageX - this.downX;
        let t = eve.pageY - this.downY;

        if(l<0) l=0;
        if(t<0) t=0;

        this.box.style.left = l + "px";
        this.box.style.top = t + "px";
    }

    new Drag(document.querySelector(".box1"));

    new SmallDrag(document.querySelector(".box2"));


    // new关键字，做了什么
    // 1. 创建一个新对象
    // 2. 将函数中的this指向该对象
    // 3. 将对象的__proto__指向函数的prototype
    // 4. 检测原函数是否主动返回对象，如果没有，返回这个新对象

    

</script>
</html>